<template>
  <div class="star" :class='`star-${size}`'>
    <span class="star-item" v-for="(c,index) in StarClass" 
    :key="index" :class="c"></span>
    <!-- <span class="star-item on"></span>
    <span class="star-item on"></span>
    <span class="star-item half"></span>
    <span class="star-item off"></span> -->
  </div>
</template>

<script>
const ON = 'on'
const HALF = 'half'
const OFF = 'off'
export default {
  props: {
      score:{
          type:Number
      },
      size:{
          type:Number
      }
  },
  data() {
    return {};
  },
  computed: {
      StarClass() {
          let StarArr = []
          let {score} = this
            let intNum = Math.floor(score)
            for (let i = 0; i < intNum; i++) {
                StarArr.push(ON)         
            }
          if(score*10-intNum*10>5){
              StarArr.push(HALF)
          }
          if(StarArr.length<5){
              StarArr.push(OFF)
          }
      return StarArr
      }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped  lang='stylus' >
@import '../../common/stylus/mixins.styl'
.star // 2x图 3x图
  float left
  font-size 0
  .star-item
    display inline-block
    background-repeat no-repeat
  &.star-48
    .star-item
      width 20px
      height 20px
      margin-right 22px
      background-size 20px 20px
      &:last-child
        margin-right 0
      &.on
        bg-image('./images/stars/star48_on')
      &.half
        bg-image('./images/stars/star48_half')
      &.off
        bg-image('./images/stars/star48_off')
  &.star-36
    .star-item
      width 15px
      height 15px
      margin-right 6px
      background-size 15px 15px
      &:last-child
        margin-right 0
      &.on
        bg-image('./images/stars/star36_on')
      &.half
        bg-image('./images/stars/star36_half')
      &.off
        bg-image('./images/stars/star36_off')
  &.star-24
    .star-item
      width 10px
      height 10px
      margin-right 3px
      background-size 10px 10px
      &:last-child
        margin-right 0
      &.on
        bg-image('./images/stars/star24_on')
      &.half
        bg-image('./images/stars/star24_half')
      &.off
        bg-image('./images/stars/star24_off')
</style>
